<template>
  <ElCard>
    <div class="todo-item">
      <div class="left">
        <div :class="{ title: true, done: item.done }">{{item.title}}</div>
        <div class="content">{{item.content}}</div>
      </div>
      <div class="right">
        <span class="created">{{created || '----/--/--'}}</span>
        <div class="btns">
          <template v-if="item.done">
            <ElButton size="mini" circle type="warning" icon="el-icon-refresh-left" @click="switchStatus"></ElButton>
          </template>
          <template v-else>
            <ElButton size="mini" circle type="primary" icon="el-icon-edit" @click="editHandle"></ElButton>
            <ElButton size="mini" circle type="success" icon="el-icon-check" @click="switchStatus"></ElButton>
          </template>
          <ElButton size="mini" circle type="danger" icon="el-icon-delete" @click="delHandle"></ElButton>
        </div>
      </div>
    </div>
  </ElCard>
</template>

<script>
import { computed } from 'vue'
export default {
  name: 'TodoItem',
  setup (props, ctx) {
    const editHandle = e => ctx.emit('edit', ctx.attrs.item)
    const switchStatus = e => ctx.emit('switch-status', ctx.attrs.item.id, !ctx.attrs.item.done)
    const delHandle = e => ctx.emit('del', ctx.attrs.item.id)
    const created = computed(() => {
      const date = new Date(ctx.attrs.item.created)
      return `${date.getFullYear()}/${('0' + (date.getMonth() + 1)).slice(-2)}/${('0' + date.getDate()).slice(-2)}`
    })

    return {
      item: ctx.attrs.item ?? {},
      created,
      editHandle,
      switchStatus,
      delHandle
    }
  }
}
</script>

<style scoped>
.todo-item {
  height: 80px;
  display: flex;
  justify-content: space-between;
}

.left {
  flex: 1;
  text-align: left;
}

.left>.title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
}

.left>.title.done {
  text-decoration: line-through;
}

.left>.content {
  word-break: break-all;
  font-size: 14px;
}

.right {
  width: 120px;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
